<!--
 * @Date: 2024-06-03 14:36:14
 * @Autor: 叶世超
 * @LastEditors: 叶世超 yesc163@163.com
 * @LastEditTime: 2024-06-04 15:04:42
 * @FilePath: \reslib-web\src\views\knowledge\relationship\addEditingDialog.vue
 * @Description: 描述
 * @version: 版本
-->
<template>
  <div class="add-editing-dialog">
    <el-dialog v-model="dialogFormVisible" :title="props.dialogTitle" :before-close="handleClose"
               :fullscreen="fullscreen" width="30%" draggable align-center>
      <el-form ref="dialogFormRef" :rules="dialogRules" :model="ruleForm">
        <el-form-item label="文件名称" :label-width="formLabelWidth" prop="fileName">
          <el-input v-model="ruleForm.fileName" placeholder="请输入关联文件名称" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="文件类型" :label-width="formLabelWidth" prop="typeType">
          <el-input v-model="ruleForm.fileType" placeholder="请输入关联文件名称" autocomplete="off"/>
        </el-form-item>
        <!--        <el-form-item label="图书发布状态" prop="fileType">
                  <el-select class="!w-240px" v-model="ruleForm.fileType" placeholder="请选择文件类型">
                    <el-option label="图片" value="1"/>
                    <el-option label="视频" value="2"/>
                    <el-option label="音频" value="3"/>
                    <el-option label="图书" value="4"/>
                    <el-option label="小故事" value="5"/>
                    <el-option label="战斗序列" value="6"/>
                  </el-select>
                </el-form-item>-->
        <el-form-item label="上传文件" :label-width="formLabelWidth" prop="entityPhotoUrl">
          <el-upload :http-request="uploadPhoto" class="avatar-uploader" :show-file-list="false"
                     :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <el-icon class="avatar-uploader-icon">
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirm(dialogFormRef)">确定</el-button>
          <el-button @click="cancel(dialogFormRef)">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="tsx" setup>
import * as FormApi from "@/api/kg/graphResource";
import type {FormInstance, FormRules} from 'element-plus'

const props = defineProps({
  dialogTitle: String,
  operationType: String,
  addActiveName: String,
  currentOperationData: Object,
})

interface RuleForm {
  fileName: string
  fileType: string
}

const ruleForm = reactive<RuleForm>({
  fileName: '',
  fileType: '',
})

const dialogRules = reactive<FormRules<RuleForm>>({
  fileName: [{required: true, message: '请输入资源名称', trigger: 'change'}],
})
const emits = defineEmits(['subEvent'])
const dialogFormVisible = ref(false) // 对话框窗体可见
const dialogFormRef = ref<FormInstance>() // 对话框表单ref
const fullscreen = ref(false) // 是否全屏
const formLabelWidth = '80px'

const open = async () => {
  if (props.operationType === 'edit') Object.assign(ruleForm, props.currentOperationData)
  dialogFormVisible.value = true
}
defineExpose({open})
// 弹窗确定
const confirm = async (formEl: FormInstance | undefined) => {
  console.log(formEl)
  console.log(' console.log(props.operationType)', props.operationType)
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(props.operationType)
      if (props.operationType === 'add') {
        const params = {...ruleForm}
        FormApi.insertRDJCGraphResource(params).then((res) => {
          dialogFormVisible.value = false
          formEl.resetFields()
          ElMessage({
            message: '添加成功',
            grouping: true,
            showClose: true,
            type: 'success'
          })
          emits('subEvent')
        })
      } else if (props.operationType === 'edit') {
        const params = {
          id: props.currentOperationData.id,
          fileName: ruleForm.fileName,
        }
        FormApi.updateRDJCGraphResource(params).then((res) => {
          dialogFormVisible.value = false
          formEl.resetFields()
          ElMessage({
            message: '修改成功',
            grouping: true,
            showClose: true,
            type: 'success'
          })
          emits('subEvent')
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 弹窗取消
const cancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  dialogFormVisible.value = false
}
// 弹窗关闭回调
const handleClose = (done: () => void) => {
  Object.keys(ruleForm).map(item => ruleForm[item] = '')
  done()
}
</script>
<style lang="scss" scoped>
.add-editing-dialog {
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
